<template>
  <el-card>
    <el-button 
    type="primary"
    :icon="Plus"
    @click="dialogTableVisible = true" >新增</el-button>
    <el-dialog 
    v-model="dialogTableVisible" 
    :before-close="beforeClose" 
    width="500"
    :title="!menuForm.id? '添加权限':'修改权限'">
        <el-form 
        ref="formRef" 
        :model="menuForm" 
        :rules="rules"
        >
            <el-form-item v-show="false" prop="id">
              <el-input v-model="menuForm.id"/>
            </el-form-item>
            <el-form-item 
            label="名称"
            prop="name"
            >
                <el-input 
                v-model="menuForm.name"
                placeholder="请填写名称" />
            </el-form-item>
            <el-form-item
                 label="权限"
            >
              <el-tree
              ref="treeForm"
              :data="permissionsData"
              node-key="id"
              show-checkbox
              :default-checked-keys="[4,5]"
              :default-expanded-keys="[4,5]"
              />

            </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="confirm(formRef)">
              确认
            </el-button>
          </div>
        </template>
    </el-dialog>
    <el-table :data="menuPermissionslist" style="width: 100%">
    <el-table-column prop="id" label="id" width="180" />
    <el-table-column prop="name" label="名称" width="180" />
    <el-table-column prop="permissionName" label="权限名称" />
    <el-table-column  label="操作" >
      <template #="{row}">
        <el-button type="primary"  @click="updataMneu(row)">修改</el-button>
        <el-button type="primary" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      :disabled="disabled"
      :background="background"
      layout="->,total, prev, pager, next"
      :total="total"
    />
  </el-card>
  
</template>

<script setup>
import { ref, reactive ,onMounted} from 'vue'
import { reqUserGetmenu,reqUserSetmenu,reqMenuList } from '../../api/menu';
import {Plus} from '@element-plus/icons-vue'

onMounted(()=>{
    getMenuPermissions()
    getMenulist()
})

const dialogTableVisible = ref(false)
const formRef = ref()
const menuForm = reactive({
    id:'',
    name: '',
    permissions: ''

})

//校验
const rules=reactive({
  name:[ { required: true, message: '请输入权限名称', trigger: 'blur' },]
})

//控制对话框关闭前回调
const beforeClose = () => {
    dialogTableVisible.value = false
    formRef.value.resetFields()
    treeForm.value.setCheckedKeys()
}

//菜单权限数据
const permissionsData=ref([])
const treeForm=ref()
const getMenuPermissions=async()=>{
    const res=await reqUserGetmenu()
    // console.log(res);
    permissionsData.value=res.data.data
    

}

//提交菜单数据
const confirm= async(formEl)=>{
  if (!formEl) return
  await  formEl.validate((valid, fields)=>{
    if(valid){
      //treeForm 获取选中的数据
      const permissions= JSON.stringify(treeForm.value.getCheckedKeys())
      reqUserSetmenu({name:menuForm.name,permissions,id:menuForm.id})
      dialogTableVisible.value=false
     
    }else{
      console.log('error submit!', fields)
    }
  })
}
//获取菜单权限列表数据
const paginationData=reactive({
  pageNum:1,
  pageSize:10,

})
const menuPermissionslist=ref([])
const total=ref(0)
const getMenulist=async()=>{ 
  const res=await reqMenuList(paginationData)
  console.log(res);
  if(res.data.code === 10000){
    menuPermissionslist.value=res.data.data.list
    total.value=res.data.data.total
  }
}

//修改菜单权限数据
const updataMneu=(row)=>{
  dialogTableVisible.value=true
  menuForm.id=row.id
  menuForm.name=row.name
}

</script>



<style scoped></style>